<template>
  <!--执行页-电话簿-发送邮件 -->
  <section class="component send-mail">
    <el-form
      ref="form"
      :rules="rules"
      label-width="120px"
      inline
      :model="model"
    >
      <el-form-item label="逾期阶段">
        <el-input v-model="overduePeriod" disabled></el-input>
      </el-form-item>
      <el-form-item label="邮件模板名称" prop="templateId">
        <el-select
          v-model="model.templateId"
          placeholder="请选择"
          clearable
          @change="onTemplateContentChange"
        >
          <el-option
            v-for="item in templateDataSet"
            :key="item.id"
            :label="item.templateName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="邮件内容" prop="templateContent">
        <el-input
          type="textarea"
          v-model="model.templateContent"
          maxlength="200"
          readonly
          show-word-limit
          class="templateContent"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="operate-buttons">
      <el-button @click="close">取消</el-button>
      <el-button @click="commit">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Emit, Prop, Watch } from "vue-property-decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { TemplateService } from "~/services/domain-service/template.service";

@Component({})
export default class SendMail extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;

  @Dependencies(TemplateService)
  private templateService: TemplateService;

  @Prop({ required: true })
  private caseId: string;

  @Prop({ required: true })
  private contactsData: any;

  private overduePeriod: string = "";

  private templateDataSet: any[] = [];

  private rules: any = {
    templateId: [{ required: true, message: "请输入模板名称" }]
  };

  private contactModel = {
    personalContactId: "",
    relationship: "",
    targetName: "",
    mobileNo: ""
  };
  private model: any = {
    templateId: "",
    templateContent: ""
  };

  public refresh() {
    const form: any = this.$refs["form"];
    form.resetFields();
    this.caseOperatorPageService.queryCaseInfo(this.caseId).subscribe(data => {
      this.overduePeriod = "M" + data.overduePeriod;
    });
  }

  @Emit("close")
  private close() {}

  @Watch("overduePeriod")
  private onOverduePeriod(val) {
    if (!val) {
      this.templateDataSet = [];
      return;
    }
    const request: any = {
      overduePeriod: val && Number.parseInt(val.substr(1)) >= 37 ? "N6" : val,
      templateCategory: "MAIL"
    };
    this.templateService
      .getTemplateByOverduePeriod(request)
      .subscribe(data => (this.templateDataSet = data || []));
  }

  private onTemplateContentChange(templateId) {
    this.caseOperatorPageService
      .getTemplateContent({ caseId: this.caseId, templateId })
      .subscribe(data => (this.model.templateContent = data));
  }

  private commit() {
    const form: any = this.$refs["form"];
    form.validate(result => {
      if (!result) return;
      const request: any = {
        caseId: this.caseId,
        templateId: this.model.templateId,
        contIds: [this.contactsData.id]
      };
      this.caseOperatorPageService.sendMail(request).subscribe(data => {
        this.$message.success("发送成功!");
        this.close();
      });
    });
  }
}
</script>

<style scoped lang="less">
.component.send-mail {
  .templateContent {
    width: 485px;
  }
}
</style>
